<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<base href="<%=basePath%>">

		<title>My JSP 'list.jsp' starting page</title>

		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="This is my page">
		<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
		<script type="text/javascript">
		function query(){
  			//无刷新调用http://..获取到数据数据通过动dom方式添加到 table
  			//ajax(异步的ajax)+json
  			var xmlhttp=null;
  			//兼容所有的浏览器创建这个对象XHR对象
			if (window.XMLHttpRequest)
 			{// 支持code for IE7+, Firefox, Chrome, Opera, Safari
  				xmlhttp=new XMLHttpRequest();
 			}
			else
 			 {// code for IE6, IE5
 				 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
 			 }
 			 //接收open产生的关联，回调函数
  			xmlhttp.onreadystatechange=function()
 			 {
  				if (xmlhttp.readyState==4 && xmlhttp.status==200)
   				 {
   				 //返回的是字符串的json
  			 	 var resutJson=xmlhttp.responseText;
  			 	 //转换为接js对象
  			 	 var resutObj=JSON.parse(resutJson);
  			 	 	//获取表格对象
  			 	 	var table=document.getElementById("myTable");
  			 	 	//将所有名字为dataTr的tr全部删除
  			 	 	var allDateTr=document.getElementsByName("dataTr");
  			 	 	 var length=allDateTr.length;
  			 	 	 for(var i=0;i<length;i++){
  			 	 	 	table.removeChild(allDateTr[0]);
  			 	 	 }
  			 	 	for(var i=0;i<resutObj.length;i++){
  			 	 		var obj=resutObj[i];
  			 	 		var tr=document.createElement("tr");
  			 	 		var td=document.createElement("td");
  			 	 		td.innerText=obj.foodname;
  			 	 		var td1=document.createElement("td");
  			 	 		td1.innerText=obj.price;
  			 	 		tr.setAttribute("name","dataTr");
  			 	 		//追加到table
  			 	 		tr.appendChild(td);
  			 	 		tr.appendChild(td1);
  			 	 		table.appendChild(tr);
  			 	 	}
   	 			}
  			}	//获取文本框传过来的值
  				var foodname=document.getElementsByName("foodname")[0].value;
  				//open表示产生一个请求的关联(get提交)
				xmlhttp.open("GET","${pageContext.request.contextPath}/queryFood?foodname="+foodname,true);
				xmlhttp.send();
  		}
  	</script>
	</head>

	<body>
		<input type="text" name="foodname" />
		<input type="button" value="查询" onclick="query()"/>
		<table id="myTable">
			<tr><th>菜品名</th><th>菜品价格</th></tr>
		</table>

	</body>
</html>
